<div class="dialog">
    <table>
        <tbody>
        
            <tr class="prop">
                <td valign="top" class="name">
                    <label for="region"><g:message code="marketPriceResearch.region" default="Region" />:</label>
                </td>
                <td valign="top" class="value ${hasErrors(bean: marketPriceResearchInstance, field: 'region', 'errors')}">
                    <span id="regionName">
                        ${marketPriceResearchInstance?.region?.encodeAsHTML()}
                    </span>
                    <g:hiddenField name="region.id" value="${marketPriceResearchInstance?.region?.id}" /> 
                </td>
        
                <td valign="top" class="name">
                    <label for="market"><g:message code="marketPriceResearch.market" default="Market" />:</label>
                </td>
                <td valign="top" class="value ${hasErrors(bean: marketPriceResearchInstance, field: 'market', 'errors')}">
                    <g:textField name="marketInput" value="${marketPriceResearchInstance?.market?.encodeAsHTML()}"/>
                    <g:hiddenField name="market.id" value="${marketPriceResearchInstance?.market?.id}" /> 
                </td>
        
                <td valign="top" class="name">
                    <label for="date"><g:message code="marketPriceResearch.date" default="Date" />:</label>
                </td>
                <td valign="top" class="value ${hasErrors(bean: marketPriceResearchInstance, field: 'date', 'errors')}">
                    <g:jqDatePicker name="date" value="${marketPriceResearchInstance?.date}"></g:jqDatePicker>
                </td>
            </tr>
        
        </tbody>
    </table>
    <g:hiddenField name="approved" value="${marketPriceResearchInstance?.approved}" />
</div>
<div class="list">
    <table>
        <thead>
            <tr>
                <th><g:message code="marketResearchDetail.serialNumber" default="serialNumber" /></th>
                <th><g:message code="marketResearchDetail.product" default="Product" /></th>
                <th><g:message code="marketResearchDetail.price" default="Price" /></th>
                <th><g:message code="marketResearchDetail.promotion" default="Promotion" /></th>
           </tr>
        </thead>
        <tbody>
        <g:each in="${marketPriceResearchInstance?.details?.sort{it?.serialNumber}}" status="i" var="marketResearchDetailInstance">
            <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
                <td>
                    ${fieldValue(bean: marketResearchDetailInstance, field: "serialNumber")}
                    <g:hiddenField name="details[${i}].serialNumber" value="${fieldValue(bean: marketResearchDetailInstance, field: 'serialNumber')}" />
                </td>
                <td>
                    ${fieldValue(bean: marketResearchDetailInstance, field: "product")}
                    <g:hiddenField name="details[${i}].product" value="${fieldValue(bean: marketResearchDetailInstance, field: 'product')}" />
                </td>
                <td class="number">
                    <g:textField name="details[${i}].price" value="${formatNumber(number : marketResearchDetailInstance.price, format : '###,##0.00')}" />
                </td>
                <td>
                    <g:checkBox name="details[${i}].promotion" 
                        value="${marketResearchDetailInstance?.promotion}" />
                </td>
            </tr>
        </g:each>
        </tbody>
    </table>
</div>
<script type="text/javascript">
$(document).ready(function() {
    //datepicker
	$('[datepicker="datepicker"]').each(function(){
		$(this).datepicker({
			  dateFormat: 'yy-mm-dd'
			, minDate: new Date(new Date().getTime() )
			, onClose: function(dateText, inst) {
				$('[name="'+$(this).attr('target') + '_year"]').val(inst.selectedYear)
				$('[name="'+$(this).attr('target') + '_month"]').val(inst.selectedMonth + 1)
				$('[name="'+$(this).attr('target') + '_day"]').val(inst.selectedDay)
			}
		}).attr("readonly", true)
    });
    //market
    $("#marketInput").autocomplete({
        minLength: 0,
        source: function(request, response) {
           $.ajax({
                url: "${createLink(controller:'marketResearchAjax', action: 'marketInstanceList')}",
                data: { term: request.term },
                dataType: "json",
                type: "POST",
                success: function( data ) {
                    response( $.map( data, function( item ) {
                        return{
                            id : item[0],
                            value: item[1]+'-'+item[2],
                            label: item[1]+'-'+item[2],
                            regionId:item[3],
                            regionName:item[4]+'-'+item[5],
                            marketType:item[6]+'-'+item[7]
                        }
                    }));
                }
            });
        },
        select: function( event, ui ) {
            //debugger;
            $("#market\\.id").val(ui.item.id);
            $("#region\\.id").val(ui.item.regionId);
            $("#regionName").html(ui.item.regionName);
            $("#marketType").html(ui.item.marketType);
        }
    });


});
</script>
